<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>几个注意点</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				1.一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
				2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。
		-->

		<!-- 准备好一个容器-->
		<div id="root">
			<school></school>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

        Vue.prototype.x = 99

        // 定义school组件
        const school = Vue.extend({
        template: `
                <div>
                    <h2>学校名称:{{name}}</h2>
                    <h2>学校地址:{{address}}</h2>
                    <button @click="showX">点我输出x</button>
                    </div>
            `,
        data() {
            return {
                name: '尚硅谷',
                address: '北京'
            }
        },
        methods: {
            showX(){
                console.log(this.x)
            }
        },
    })

    //创建vm
    const vm =  new Vue({
            el:'#root',
            data:{
                msg:'你好'
            },
            components:{
                school:school
            }
        })

        // console.log("@",school.prototype.__proto__ === Vue.prototype)
		
        // 定义一个构造函数
      /*   function Demo(){
            this.a = 1;
            this.b = 2;
        }

        //创建一个Demo的实例对象
        const d = new Demo()
        console.log(Demo.prototype) //显示原型属性

        console.log(d.__proto__)    //隐示原型属性

        //程序员通过显示原型属性操作原型对象 追加一个x属性 值为99
        Demo.prototype.x = 99
        console.log('@',d.x) */
        
		
	</script>
</html>